<template>
  <div id="root">
    <div>
      <el-button style="width: 100px" type="success" @click="addHandle">新增</el-button>
      <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop"
                         :label="column.label"
                         :width="column.width"></el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="scope">
            <el-button type="danger" size="mini" @click="deleteHandle(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Modal ref="modalRef" @ok="selectCallBack"></Modal>
  </div>
</template>

<script setup lang="ts">

import Modal from "./modal.vue";

const tableData = ref([])
const columns = ref([
  {prop: 'accountNo', label: '员工账号'},
  {prop: 'password', label: '密码'},
  {prop: 'username', label: '员工名称'},
  {prop: 'userType', label: '员工类型'},
])
const modalRef = ref()

import request from '@/config/axios'
import {onMounted} from "vue";
import {ElMessage} from "element-plus";

const fetchData = async function () {
  const response = await request.get({
    url: '/userManage/list'
  })
  console.log("response", response)
  tableData.value = response
}
const addHandle = function () {
  modalRef.value?.add()
}

const deleteHandle = function (row) {
  ElMessage.info('功能尚未开放')
  // ElMessageBox.confirm('真的要删除吗！', '删除 ' + `${row.username} 用户吗？`, {
  //   confirmButtonText: 'OK',
  //   cancelButtonText: '取消',
  //   type: 'warning',
  // })
  //   .then(() => {
  //     request.delete({
  //       url: '/orderTransferPhoneRecord/deleteById',
  //       params: { id: row.id }
  //     }).then(() => {
  //       this.getAnswerRecord(this.orderId)
  //     })
  //     ElMessage.success('功能为开放')
  //   })
  //   .catch(() => {
  //     ElMessage({
  //       type: 'info',
  //       message: '已取消退出',
  //     });
  //   });
}

const selectCallBack = function () {
  fetchData()
}

onMounted(() => {
  fetchData()
});

</script>

<style scoped>

</style>
